import React, { Component } from "react";
import {
  View,
  TouchableOpacity,
  Text,
  ScrollView,
  Animated
} from "react-native";
import NavBarConfig from "../modules/NavBar";
import http from "../../util/http";
import { MESSAGE } from "../../config/Api";
import { isScrollBottom } from "../../util/util";
import moment from "moment";
import noticeStyles from "../../style/pages/notice";

class MessageList extends Component {
  static navigationOptions = ({ navigation }) =>
    NavBarConfig(
      {
        headerTitle: "站內信列表",
        headerRight: []
      },
      navigation
    );

  state = {
    pageNo: 0,
    list: [],
    totalPage: 0,
    isEditing: false
  };

  async getNoticeList() {
    if (this.state.pageNo === this.state.totalPage && this.state.pageNo > 0)
      return;
    let data = await http.get(MESSAGE, {
      page: this.state.pageNo
    });
    this.setState({
      pageNo: this.state.pageNo + 1,
      list: data.data.list,
      totalPage: Math.ceil(data.data.count / data.data.take)
    });
  }
  async handleDelete(id) {
    const data = await http.delete(MESSAGE + `/${id}`);
    if (data) {
      const list = this.state.list.filter(item => item.id !== id);
      this.setState({ list });
    }
  }

  async handleRead(id, flag = false) {
    const data = await http.put(MESSAGE + `/${id}`);
    if (data) {
      const list = this.state.list.map(
        item =>
          item.id === id
            ? {
                ...item,
                unread: true
              }
            : item
      );
      this.setState({
        list: list
      });
      if (flag) {
        toast("設置成功");
      }
    }
  }
  handleEdit() {
    this.setState({
      isEditing: !this.state.isEditing
    });
  }
  contentViewScroll(e) {
    isScrollBottom(e, () => {
      this.getNoticeList();
    });
  }

  componentWillMount() {
    this.getNoticeList();
  }

  render() {
    return (
      <View
        style={{
          position: "absolute",
          top: 0,
          right: 0,
          left: 0,
          bottom: 0
        }}
      >
        <ScrollView onMomentumScrollEnd={this.contentViewScroll.bind(this)}>
          <View style={noticeStyles.bgtListView}>
            {this.state.list.map(notice => (
              <View
                key={notice.id}
                style={[
                  noticeStyles.bgtListItem,
                  { marginLeft: this.state.isEditing ? -160 : 0 }
                ]}
              >
                {notice.unread ? (
                  <Text
                    style={{
                      position: "absolute",
                      top: 13,
                      left: 8,
                      width: 5,
                      height: 5,
                      borderRadius: 2.5,
                      overflow: "hidden",
                      backgroundColor: "red"
                    }}
                  />
                ) : null}
                <TouchableOpacity
                  onPress={() => {
                    if (notice.unread) this.handleRead(notice.id);
                    this.props.navigation.navigate("MessageDetail", {
                      id: notice.id
                    });
                  }}
                >
                  <Text style={noticeStyles.msgInfo}>
                    {notice.title ? `[${notice.title}] ` : " "}
                    {moment(new Date(notice.createtime)).utcOffset(new Date(notice.createtime).getTimezoneOffset()).format("YYYY-MM-DD")}
                  </Text>
                  <Text style={noticeStyles.msgTitle}>{notice.content}</Text>
                </TouchableOpacity>
                <View style={noticeStyles.listButtonContainer}>
                  <TouchableOpacity
                    style={[noticeStyles.buttonItem]}
                    onPress={() => {
                      if (notice.unread) this.handleRead(notice.id, true);
                    }}
                  >
                    <Text
                      style={[noticeStyles.buttonItem, noticeStyles.hadRead]}
                    >
                      標為已讀
                    </Text>
                  </TouchableOpacity>
                  <TouchableOpacity style={[noticeStyles.buttonItem]}>
                    <Text
                      style={[noticeStyles.buttonItem, noticeStyles.delete]}
                    >
                      刪除
                    </Text>
                  </TouchableOpacity>
                </View>
              </View>
            ))}
          </View>
        </ScrollView>
        <TouchableOpacity onPress={this.handleEdit.bind(this)}>
          <Text style={noticeStyles.editBtn}>
            {this.state.isEditing ? "取消编辑" : "编 辑"}
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

export default MessageList;
